<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雨量监测信息管理系统</title>
    <link rel="stylesheet" href="static/css/index.css">
    <script type="text/javascript" src="static/js/jquery-3.7.1.min.js"></script>
    <script>
        // jQuery加载 => 涉及到jQ元素选择器的, 必须放在DOM加载之后
        $(function () {
            getRQList();
            getStationNameMapping();
            let myTime = setInterval(showTime, 1000);
            // clearInterval(myTime); // 停止定时函数(必须传入定时器对象)
        })

        function showTime() {
            let _thisTime = new Date();
            $("#time").text("\t" + _thisTime.getFullYear() + "/" + (_thisTime.getMonth() + 1) + "/"
                + _thisTime.getDate() + " " + weekMapping[_thisTime.getDay()] + " "
                + _thisTime.getHours() + ":" + _thisTime.getMinutes() + ":"
                + _thisTime.getSeconds() + ":" + _thisTime.getMilliseconds())
        }

        const weekMapping = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

        //dict
        const stationTypeMapping = {
            1: "普通站", 2: "特殊站", "-1": "未知站"
        }
        //根据mapping表动态生成dict
        let stationNameMapping = {}

        function getStationNameMapping() {
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/getStationNameList",
                type: "GET",
                dataType: "JSON",
                success: function (data) {
                    for (const datum of data) {
                        stationNameMapping[datum['id']] = datum['stationName']
                    }
                }
            })
        }

        function getRQList() {
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/getList",
                type: "GET",
                dataType: "JSON",
                success: function (data) {
                    console.log(data)
                    var info = `<table id="table1">
                        <tr><td colspan="9">数据展示&nbsp&nbsp<a href="#" onclick="showAddTable()">添加数据</a><a id="time"></a></td></tr>
                        <tr>
                            <td>主键</td>
                            <td>区域名称</td>
                            <td>雨量值</td>
                            <td>监测站名称</td>
                            <td>站点地址</td>
                            <td>站点类型</td>
                            <td>监测时间</td>
                            <td colspan="2">操作</td>
                        </tr>`
                    for (const datum of data) {
                        // console.log(datum)
                        info += `
                        <tr>
                            <td>${datum.id}</td>
                            <td>${datum.districtName}</td>
                            <td>${datum.rain}</td>
                            <td>${datum.stationName}</td>
                            <td>${datum.monitoringAddress}</td>
                            <td>${datum.stationType}|${stationTypeMapping[datum.stationType]}</td>
                            <td>${datum.monitorTime}</td>
                            <td><a href="#" onclick="showEditRQ(${datum.id})">修改</a></td>
                            <td><a href="#" onclick="delRQViaId(${datum.id})">删除</a></td>
                        </tr>
                        `
                    }
                    info += `</table>`
                    // jQ 将组合好的元素插入(replace)到div
                    $("#RQList").html(info)
                    // tr:even 偶数索引; tr:odd 奇数索引 (索引下标从0开始)
                    $("#table1 tr:odd").css("backgroundColor", "rgba(255,230,111,0.6)")

                    $("tr td").mouseover(function () {
                        // $(this).css("backgroundColor", "yellow")
                        $(this).addClass("td-mouseover")
                    }).mouseout(function () {
                        // $(this).css("backgroundColor", "rgba(255,230,111,1)")
                        $(this).removeClass("td-mouseover")
                    })
                }
            })
        }


        function delRQViaId(id) {
            console.log(id)
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/delViaId",
                type: "POST",
                dataType: "json",
                data: {'dictId': dictId},
                success: function (data) {
                    console.log(data)
                    alert(data)
                    // 使用alert阻塞自动刷新
                    // location.reload()
                    getWorkerList()
                }
            })
        }

        function showEditRQ(id) {
            getStationNameMapping();
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/getList?id=" + id,
                type: "GET",
                dataType: "JSON",
                success: function (data) {
                    var edit = `<table id="table2">
                        <tr>
                            <td colspan="9">数据修改</td>
                        </tr>
                        <tr>
                            <td>主键</td>
                            <td>区域名称</td>
                            <td>雨量值</td>
                            <td>监测站名称</td>
                            <td>站点地址</td>
                            <td>站点类型</td>
                            <td>监测时间</td>
                            <td colspan="2">操作</td>
                        </tr>
                        <tr>
                            <td>${data.id}</td>
                            <td><input type="text" id="text1" value="${data.districtName}"></td>
                            <td><input type="text" id="text2" value="${data.rain}"></td>
                            <td><select id="text3" name="StationName">`
                    for (let key in stationNameMapping) {
                        edit += `<option value=${key}>${stationNameMapping[key]}</option>`
                    }
                    edit += `</select></td>
                                <td><input type="text" id="text4" value="${data.monitoringAddress}"></td>
                                <td><select id="text5" name="StationType">`
                    for (let key in stationTypeMapping) {
                        edit += `<option value=${key}>${stationTypeMapping[key]}</option>`
                    }
                    edit += `</select></td>
                            <td><input type="text" id="text6" value="${data.monitorTime}"></td>
                            <td><a href="#" onclick="doEditRQ([${data.id},$('#text1').val(),$('#text2').val(),$('#text3').val(),$('#text4').val(),$('#text5').val(),$('#text6').val()])">提交修改</a></td>
                            <td><a href="#" onclick="removeEditTable()">关闭</a></td>
                        </tr></table>`
                    $("#editRQTable").html(edit)
                    $('#text3').val(data.stationName)
                    $('#text5').val(data.stationType)

                    for (const child in $('tr').children()) {
                        console.log(child)
                    }
                }
            })

        }

        function doEditRQ(list) {
            console.log(list)
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/updateRQ",
                type: "POST",
                dataType: "json",
                data: {
                    'id': list[0],
                    'DistrictName': list[1],
                    'Rain': list[2],
                    'MonitoringStation': list[3],
                    'MonitoringAddress': list[4],
                    'StationType': list[5],
                    'MonitorTime': list[6],
                },
                success: function (data) {
                    console.log(data)
                    alert(data)
                    // 使用alert阻塞自动刷新
                    location.reload()
                    // getRQList()
                }
            })
        }

        function removeEditTable() {
            $("#editRQTable").html(``)
        }

        function removeAddTable() {
            $("#addRQTable").html(``)
        }

        function showAddTable() {
            var add = `<table>
        <tr>
            <td colspan="9">数据添加</td>
        </tr>
        <tr>
            <td>区域名称</td>
            <td>雨量值</td>
            <td>监测站</td>
            <td>站点地址</td>
            <td>站点类型</td>
            <td>监测时间</td>
            <td colspan="2">操作</td>
        </tr>
        <tr>
            <td><input id="DistrictName"></td>
            <td><input id="Rain"></td>
            <td><select id="StationName" name="StationName">`
            // 获取dict中键值对的遍历, for key in dict { 实际上value=dict{key} }
            for (let key in stationNameMapping) {
                add += `<option value=${key}>${stationNameMapping[key]}</option>`
            }
            add += `</select></td>
            <td><input id="MonitoringAddress"></td>
            <td><select id="StationType" name="StationType">`
            // 获取dict中键值对的遍历, for key in dict { 实际上value=dict{key} }
            for (let key in stationTypeMapping) {
                add += `<option value=${key}>${stationTypeMapping[key]}</option>`
            }
            add += `</select></td>
            <td><input id="MonitorTime"></td>
            <td colspan="1"><a href="#" onclick="addRQ()">添加</a></td>
            <td colspan="1"><a href="#" onclick="removeAddTable()">关闭</a></td>
        </tr>
    </table>`
            $("#addRQTable").html(add)
        }

        function addRQ() {
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/addRQ",
                type: "POST",
                dataType: "json",
                data: {
                    // jQ, 使用 $('#id').val() 的方式直接获取input中的值
                    'DistrictName': $('#DistrictName').val(),
                    'Rain': $('#Rain').val(),
                    'MonitoringStation': $('#StationName').val(),
                    'MonitoringAddress': $('#MonitoringAddress').val(),
                    'MonitorTime': $('#MonitorTime').val(),
                    'StationType': $('#StationType').val()
                },
                success: function (data) {
                    console.log(data)
                    alert(data)
                    // 使用alert阻塞自动刷新
                    // location.reload()
                    getRQList()
                }
            })
        }
    </script>
</head>
<body>
<div id="RQList"></div>
<br>
<div id="addRQTable">
</div>
<br>
<div id="editRQTable"></div>
</body>
</html>